/// <reference types="cypress" />
import 'cypress-react-selector'

it(..., () => {
  mount(<ProductsList />)
  cy.contains('First item').should('be.visible')
  cy.get('.product').should('have.length', 2)

  // use https://github.com/abhinaba-ghosh/cypress-react-selector
  // to find DOM elements by React component constructor name or state
  cy.waitForReact(1000, '#cypress-root')
  cy.react('ProductsContainer').should('have.class', 'product-container')
  cy.react('AProduct').should('have.length', 2)
  cy.react('AProduct', { name: 'Second item' })
    .should('be.visible')
    .and('have.text', 'Second item')
})